<template>
  <div class="Detail">
    <div class="top">
      <b @click="$router.go(-1)">返回</b>
      <h4>商品详情</h4>
    </div>
      <div class="content">
          <dl>
              <dt><img :src="detail.img" alt=""></dt>
              <dd>
                  <h3>《{{detail.title}}》</h3>
                  <span class="num">{{detail.num}}</span><br>
                  <b>{{detail.name}},{{detail.name2}},{{detail.name3}} </b>
                  <p>{{detail.date}}<span>{{detail.title}}</span></p>
              </dd>  
          </dl>
          <div><button>♡想要</button><button>☆评分</button></div>
      </div>  
      <p>&ensp;&ensp;{{detail.word2}}</p> 
    </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  mounted() {
    this.getDetail({
      id: this.$route.params.id,
    });
  },
  methods: {
    ...mapActions(["getDetail"]),
  },
  computed: {
    ...mapState(["detail"]),
  },
};
</script>

<style lang="scss">
.top{
  width: 100%;
  height: 50px;
  border: 1px solid #000;
  display: flex;
}
.content{
  width: 100%;
  height: 200px;
  border: 1px solid #000;
  // background-color: #485053 ;
  dl{
    display: flex;
    dt{
      img{
        width: 100px;
        height: 150px;
        margin-top: 10px;
      }
    }
    dd{
      line-height: 33px;
      margin-left: 20px;
      margin-top: 15px;
      h3{
        color: #fff;
      }
      .num{
        color: orange;
      }
    }
  }
  div{
    button{
      width: 150px;
      height: 30px;
      margin-left: 20px;
      border-radius: 5px;
      background-color: #8b807a;
    }
  }
}
</style>